<template>
  <div class="execution">
    <basic-container>
      <avue-crud
        ref="crud"
        :option="option"
        :data="tableList"
        :table-loading="tableLoading"
        :page="page"
        @on-load="getList"
        @refresh-change="refreshChange"
        @search-change="searchChange"
        @search-reset="searchReset"
        @size-change="sizeChange"
        @current-change="currentChange"
      >
        <template slot="menu" slot-scope="scope">
          <el-button v-if="permissionBtn.pre_msg_edit" type="text" size="small" icon="el-icon-edit" @click="handleEdit(scope.row, scope.index)">查看详情</el-button>
          <el-button v-if="permissionBtn.pre_msg_del" type="text" size="small" icon="el-icon-delete" @click="handleDelete(scope.row, scope.index)">删除</el-button>
        </template>
      </avue-crud>

      <el-dialog :visible.sync="visible" width="80%" @closed="dialogClosed">
        <el-form ref="searchForm" :inline="true" :model="search" :rules="rules">
          <el-form-item label="项目名称" prop="sys">
            <el-select v-model="search.sys" @change="getGroupList">
              <el-option v-for="item in sysList" :key="item.sysCode" :label="item.sysName" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务名称" prop="group">
            <el-select v-model="search.group"><el-option v-for="item in groupList" :key="item.groupCode" :label="item.groupName" :value="item.groupCode"></el-option></el-select>
          </el-form-item>
          <el-form-item><el-button type="primary" icon="el-icon-search" @click="searchTree">查询</el-button></el-form-item>
        </el-form>
        <el-row type="flex" justify="space-between">
          <el-col :span="10">
            <el-card shadow="hover" class="slot-header">
              <div slot="header">
                <i class="el-icon-setting"></i>
                报文头配置
              </div>
              <menu-tree :data="data" ref="treemenu" :optionTree="optionTree" :allowDrag="allowDrag" />
              <el-button type="primary" icon="el-icon-document-checked" class="save-btn">保存报文头配置</el-button>
            </el-card>
          </el-col>
          <el-col :span="13">
            <el-card shadow="hover" class="slot-header">
              <div slot="header">
                <i class="el-icon-box"></i>
                报文头节点信息
              </div>
              <el-form label-width="80px">
                <el-form-item v-for="(item, index) in formList" :key="index" :label="item.label">
                  <el-input v-if="item.type === 'input'"></el-input>
                  <el-select v-else-if="item.type === 'select'"></el-select>
                </el-form-item>
              </el-form>
              <el-button type="primary" icon="el-icon-circle-check" class="save-btn">保存节点配置</el-button>
            </el-card>
          </el-col>
        </el-row>
      </el-dialog>
    </basic-container>
  </div>
</template>
<script>
import { fetchList, putObj, delObj } from '@/api/pre/code'
import { getSysList } from '@/api/pre/insystem'
import { getGroupList } from '@/api/pre/group'
import { option } from '@/const/crud/pre/code'
import { mapGetters } from 'vuex'
import MenuTree from '@/components/menu-tree/main'

export default {
  name: 'Code',
  components: {
    MenuTree
  },
  data() {
    return {
      option: option,
      tableList: [],
      tableLoading: false,
      searchForm: {},
      page: {
        total: 0,
        currentPage: 1,
        pageSize: 20
      },

      visible: false,
      search: {
        sys: '',
        group: ''
      },
      sysList: [],
      groupList: [],
      rules: {
        sys: [{ required: true, message: '系统名称不能为空' }],
        group: [{ required: true, message: '系统分组不能为空' }]
      },
      data: [
        {
          value: 0,
          label: '一级部门',
          children: [
            {
              value: 1,
              label: '一级部门1'
            },
            {
              value: 2,
              label: '一级部门2',
              addNext: true, // 后置插入节点
              addList: [
                {
                  value: 9,
                  label: 'abc'
                },
                {
                  value: 10,
                  label: 'AAAAAAAA'
                }
              ]
            }
          ]
        },
        {
          value: 3,
          label: '二级部门',
          addList: [
            {
              value: 12,
              label: 'abc'
            },
            {
              value: 11,
              label: 'bbbbbbbb'
            }
          ],
          children: [
            {
              value: 4,
              label: '二级部门1',
              addList: [
                {
                  value: 19,
                  label: 'aaaaaaaaaaaaaacsafs'
                }
              ]
            },
            {
              value: 5,
              label: '二级部门2'
            }
          ]
        }
      ],
      optionTree: {},
      formList: [
        {
          label: 'test',
          type: 'input'
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['permissions']),
    permissionBtn() {
      return {
        pre_msg_edit: this.permissions['pre_msg_edit'],
        pre_msg_add: this.permissions['pre_msg_add'],
        pre_msg_del: this.permissions['pre_msg_del'],
        pre_msg_copy: this.permissions['pre_msg_copy']
      }
    }
  },
  created() {
    this.getSysList()
  },

  methods: {
    getSysList() {
      getSysList().then(res => {
        this.sysList = res.data.data
      })
    },
    getGroupList() {
      getGroupList({ sysCode: this.search.sys.sysCode }).then(res => {
        this.groupList = res.data.data
        if (this.groupList.length) {
          this.search.group = this.groupList[0].groupCode
        }
      })
    },
    searchTree() {
      this.$refs.searchForm.validate(valid => {
      })
    },
    dialogClosed() {
      this.$refs.searchForm.resetFields()
    },

    getList(page, params) {
      this.tableLoading = true
      fetchList(
        Object.assign(
          {
            current: page.currentPage,
            size: page.pageSize
          },
          params,
          this.searchForm
        )
      ).then(response => {
        this.tableList = response.data.data.records
        this.page.total = response.data.data.total
        this.tableLoading = false
      })
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },
    currentChange(current) {
      this.page.currentPage = current
    },
    refreshChange() {
      this.getList(this.page)
    },
    searchChange(param, done) {
      this.searchForm = param
      this.page.currentPage = 1
      this.getList(this.page, param)
      done()
    },
    //查看详情
    handleEdit(row, index) {
      this.visible = true
    },

    //删除
    handleDelete: function(row, index) {
      this.$confirm('是否确认删除' + row.systemName + '的交易码配置？', '提示', {
        type: 'warning'
      })
        .then(() => {
          return delObj(row.sysId)
        })
        .then(res => {
          this.$message.success('删除成功')
          this.refreshChange()
        })
        .catch(() => {})
    },
    searchReset() {
      this.searchForm = {}
      this.page.currentPage = 1
      this.getList(this.page)
    },
    getTodoById: function(state) {
      function f(id) {
        return state.todos.find(todo => todo.id === id)
      }
    },

    allowDrag(node) {
      if (node.data.label === '一级部门1') {
        return false
      }
      return true
    }
  }
}
</script>
